<template>
    <div class="register-wrapper">
        <div class="register-container">
            <div class="register-header">
                <h1><i class="fas fa-bolt"></i> 电力安全场景系统</h1>
                <h2><i class="fas fa-user-plus"></i> 用户注册</h2>
                <h3>请设置您的用户名和密码</h3>
            </div>
            <form @submit.prevent="handleRegister">
                <div class="form-group">
                    <label for="username">
                        <i class="fas fa-user"></i> 用户名
                    </label>
                    <input type="text"
                           id="username"
                           v-model="username"
                           placeholder="输入用户名(4-16位字母或数字)"
                           @blur="v$.username.$touch()"
                           required />
                </div>
                <div class="form-group">
                    <label for="password">
                        <i class="fas fa-lock"></i> 密码
                    </label>
                    <input type="password"
                           id="password"
                           v-model="password"
                           placeholder="输入密码(至少6位)"
                           @blur="v$.password.$touch()"
                           required />
                </div>
                <div class="form-group">
                    <label for="confirmPassword">
                        <i class="fas fa-lock"></i> 确认密码
                    </label>
                    <input type="password"
                           id="confirmPassword"
                           v-model="confirmPassword"
                           placeholder="输入密码(至少6位)"
                           @blur="v$.password.$touch()"
                           required />
                </div>
                <button type="submit" class="register-btn" :disabled="isRegistering">
                    <span v-if="!isRegistering">注 册</span>
                    <span v-else class="loading">
                        <i class="fas fa-spinner fa-spin"></i> 注册中...
                    </span>
                </button>
            </form>
            <p>已有账号？ <router-link to="/login">立即登录</router-link></p>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
    import { useRouter } from 'vue-router';
    import axios from 'axios';

    const username = ref('');
    const password = ref('');
    const confirmPassword = ref('');
    const isRegistering = ref(false);
    const router = useRouter();

    const handleRegister = async () => {
        if (password.value !== confirmPassword.value) {
            alert('两次输入的密码不一致！');
            return;
        }
        isRegistering.value = true;
        try {
            const res = await axios.post('http://127.0.0.1:8080/auth/register', {
                username: username.value,
                password: password.value
            });
            alert(res.data.msg || '注册成功');
            router.push('/login');
        } catch (err) {
            alert(err.response?.data?.detail || '注册失败');
        } finally {
            isRegistering.value = false;
        }
    };
</script>

<style scoped>
    @import './assets/style/register.css';
</style> 